
import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Menu, X, Bell, Search, User, Home, Heart, FileText, Watch, ShoppingBag } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { useIsMobile } from '@/hooks/use-mobile';

const Navbar: React.FC = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const location = useLocation();
  const isMobile = useIsMobile();

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    setIsMobileMenuOpen(false);
  }, [location.pathname]);

  const isActive = (path: string) => {
    return location.pathname === path;
  };

  const navLinks = [
    { path: '/', label: '健康管理', icon: <Heart className="h-5 w-5" /> },
    { path: '/report-analysis', label: '报告解读', icon: <FileText className="h-5 w-5" /> },
    { path: '/wearable-devices', label: '设备', icon: <Watch className="h-5 w-5" /> },
    { path: '/health-store', label: '健康商城', icon: <ShoppingBag className="h-5 w-5" /> },
    { path: '/my', label: '我的', icon: <User className="h-5 w-5" /> },
  ];

  if (location.pathname === '/login') {
    return null;
  }

  // Mobile bottom navigation
  if (isMobile) {
    return (
      <>
        {/* Top brand bar for mobile */}
        <div className="fixed top-0 left-0 right-0 z-40 bg-white/80 backdrop-blur-md shadow-sm px-6 py-3">
          <div className="flex items-center justify-between">
            <Link 
              to="/" 
              className="text-xl font-bold tracking-tight bg-gradient-to-r from-primary to-dopamine-purple bg-clip-text text-transparent"
            >
              鹰朗健康
            </Link>
            <div className="flex items-center gap-2">
              <button className="p-2 rounded-full hover:bg-muted transition-colors duration-200">
                <Search className="h-5 w-5 text-foreground/70" />
              </button>
              <button className="p-2 rounded-full hover:bg-muted transition-colors duration-200">
                <Bell className="h-5 w-5 text-foreground/70" />
              </button>
            </div>
          </div>
        </div>

        {/* Bottom navigation for mobile */}
        <nav className="fixed bottom-0 left-0 right-0 z-40 bg-white border-t border-border px-2 py-1">
          <div className="flex items-center justify-between">
            {navLinks.map((link) => (
              <Link
                key={link.path}
                to={link.path}
                className={cn(
                  "flex flex-col items-center py-2 px-1 rounded-md transition-colors duration-200",
                  isActive(link.path) 
                    ? "text-primary" 
                    : "text-foreground/60 hover:text-foreground"
                )}
              >
                {link.icon}
                <span className="text-xs mt-1">{link.label}</span>
              </Link>
            ))}
          </div>
        </nav>

        {/* Add padding to content for fixed elements */}
        <div className="pt-16 pb-20"></div>
      </>
    );
  }

  // Desktop navigation
  return (
    <nav
      className={cn(
        'fixed top-0 left-0 right-0 z-50 transition-all duration-300 px-6 md:px-10 py-4',
        isScrolled ? 'bg-white/80 backdrop-blur-md shadow-sm' : 'bg-transparent'
      )}
    >
      <div className="max-w-7xl mx-auto flex items-center justify-between">
        <div className="flex items-center">
          <Link 
            to="/" 
            className="text-2xl font-bold tracking-tight bg-gradient-to-r from-primary to-dopamine-purple bg-clip-text text-transparent"
          >
            鹰朗健康
          </Link>
        </div>

        <div className="hidden md:flex items-center space-x-8">
          {navLinks.map((link) => (
            <Link
              key={link.path}
              to={link.path}
              className={cn(
                'nav-link',
                isActive(link.path) && 'active'
              )}
            >
              {link.label}
            </Link>
          ))}
        </div>

        <div className="hidden md:flex items-center space-x-4">
          <button className="p-2 rounded-full hover:bg-muted transition-colors duration-200">
            <Search className="h-5 w-5 text-foreground/70" />
          </button>
          <button className="p-2 rounded-full hover:bg-muted transition-colors duration-200">
            <Bell className="h-5 w-5 text-foreground/70" />
          </button>
          <Link to="/login">
            <Button variant="ghost" size="sm" className="flex items-center gap-2">
              <User className="h-5 w-5" />
              登录
            </Button>
          </Link>
        </div>

        <button 
          className="md:hidden p-2 rounded-md hover:bg-muted/50 transition-colors"
          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
        >
          {isMobileMenuOpen ? 
            <X className="h-6 w-6 text-foreground" /> : 
            <Menu className="h-6 w-6 text-foreground" />
          }
        </button>
      </div>

      {isMobileMenuOpen && (
        <div className="md:hidden absolute top-full left-0 right-0 bg-white shadow-md animate-fade-in">
          <div className="px-6 py-4 flex flex-col space-y-4">
            {navLinks.map((link) => (
              <Link
                key={link.path}
                to={link.path}
                className={cn(
                  'py-2 px-4 rounded-md transition-colors',
                  isActive(link.path) ? 'bg-muted font-medium' : 'hover:bg-muted/50'
                )}
              >
                {link.label}
              </Link>
            ))}
            <div className="flex items-center space-x-3 mt-4 pt-4 border-t">
              <button className="p-2 rounded-full hover:bg-muted/50 transition-colors">
                <Search className="h-5 w-5" />
              </button>
              <button className="p-2 rounded-full hover:bg-muted/50 transition-colors">
                <Bell className="h-5 w-5" />
              </button>
              <Link to="/login" className="flex-1">
                <Button className="w-full flex items-center justify-center gap-2">
                  <User className="h-5 w-5" />
                  登录
                </Button>
              </Link>
            </div>
          </div>
        </div>
      )}
    </nav>
  );
};

export default Navbar;
